<template>
  <div id="canvas" style="width: 100%;height: 100%;" ref="canvas"></div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts'
import dayjs from "dayjs"
const canvas = ref() // dom实例
let myChart: any = null // echarts实例
let daobao = 16593
let around = new Date().getHours() - 8 + ":" + new Date().getMinutes();
onMounted(() => {
  setTimeout(() => {
    renderChart()
  }, 200);

})
const renderChart = () => {
  myChart = echarts.init(canvas.value)
  let quebao = 18000 - parseInt(daobao)
  var img =
    "";
  var trafficWay = [
    {
      name: "用户",
      value: daobao,
    },
    {
      name: "管理员",
      value: quebao,
    },
  ];
  var data = [];
  var color = ["#00ffff", "#f3ff34"];
  for (var i = 0; i < trafficWay.length; i++) {
    data.push(
      {
        value: trafficWay[i].value,
        name: trafficWay[i].name,
        itemStyle: {
          normal: {
            borderWidth: 5,
            shadowBlur: 20,
            borderColor: color[i],
            shadowColor: color[i],
          },
        },
      },
      {
        value: 2,
        name: "",
        itemStyle: {
          normal: {
            label: {
              show: false,
            },
            labelLine: {
              show: false,
            },
            color: "rgba(0, 0, 0, 0)",
            borderColor: "rgba(0, 0, 0, 0)",
            borderWidth: 0,
          },
        },
      }
    );
  }
  var seriesOption = [
    {
      name: "",
      type: "pie",
      clockWise: false,
      radius: [45, 49],
      hoverAnimation: false,
      itemStyle: {
        normal: {
          label: {
            show: true,
            position: "outside",
            color: "#ddd",
            formatter: function (params) {
              var percent = 0;
              var total = 0;
              for (var i = 0; i < trafficWay.length; i++) {
                total += trafficWay[i].value;
              }
              percent = ((params.value / total) * 100).toFixed(0);
              if (params.name !== "") {
                return (
                  params.name + "\n" + "\n" + "百分比:" + percent + "%"
                );
              } else {
                return "";
              }
            },
          },
          labelLine: {
            length: 20,
            length2: 10,
            show: true,
            color: "#00ffff",
          },
        },
      },
      data: data,
    },
  ];
  let option = {
    color: color,
    title: {
      text: "当前时\n\n" + dayjs().format('hh:mm'),
      top: "40%",
      textAlign: "center",
      left: "49%",
      textStyle: {
        color: "#fff",
        fontSize: 12,
        fontWeight: "400",
      },
    },
    graphic: {
      elements: [
        {
          type: "image",
          z: 3,
          style: {
            image: img,
            width: 68,
            height: 68,
          },
          left: "center",
          top: "center",
          //   position: [100, 100],
        },
      ],
    },

    tooltip: {
      show: false,
    },
    legend: {
      icon: "circle",
      orient: "horizontal",
      // x: 'left',
      data: ["管理员", "用户"],
      right: 30,
      bottom: 0,
      align: "right",
      textStyle: {
        fontSize: 12,
        color: "#fff",
      },
      itemHeight: 10,
      itemGap: 10,
    },
    toolbox: {
      show: false,
    },
    series: seriesOption,
  };

  myChart.setOption(option)
}
window.addEventListener("resize", function () {
  myChart?.resize();
});
</script>

<style lang="scss" scoped></style>
